Cheers: Period Tracking App for Womxn
Duration:
16 weeks
September 2020 - December 2020
INTRODUCTION
Problem
Feminine health tracking is often a MUST for womxn (alternative spelling of “woman” or “women” for inclusivity for trans and non-binary women), as menstruation is not often a choice, yet there is a clear lack of intent for inclusivity surrounding these often unavoidable circumstances.
I noticed amongst my friends that there is no go-to app or solution available for womxn to aid their tracking habits throughout their feminine health journey.
Now here comes Cheers: a simple and inclusive period-tracking app, taking into account actual user needs -- being straightforward (as opposed to the overwhelming amount of features in the following apps).
Flo and My Calendar are a few of the current most popular menstrual tracking apps, and just by the interfaces…
My Calendar interface
Flo interface
… they scream femininity. And not so discreetly either
Solution
I adopted a thorough UCD/waterfall approach to discover initial goals and direction in the project. I organized user thoughts and research findings, and utilized usability testing and iteration heavy strategy to solidify project value and efficacy.
My role
As the sole designer, I took on this entire project, working on:
- Secondary research
- User Interviews
- Affinity Map
- Empathy Map
- User Persona
- User Stories
- Sketching
- Wireframes and wireflows
- Moodboard
- Style Guide
- High Fidelity Mockups
- Iterating
- Prototyping
- Usability Testing
SECONDARY RESEARCH
First, I needed to uncover the pain points of the current available methods of period-tracking. I conducted secondary research by diving into articles about feminine health tracking tools and methods, where I came across the following issues:
- Popular menstrual tracking apps create feelings of exclusion for sexual minorities. The partner’s gender is often assumed or implied to be male.
- Gender neutral language is not widely used, and birth & family planning is shoved in the user’s face
- Apps are not discreet, along with the lack of option for a more professional and organized interface.
I then wanted to learn more from users themselves: if they seem to believe discretion and inclusivity is lacking in their current feminine health tracking tool.
USER INTERVIEWS
I interviewed 5 womxn between the ages 20-35.
- 5/5 use their phones for 2+ hours a day
- 4/5 use an app to track their feminine health
- 1/5 uses her phone’s notes app to write down the start date every month
From my user interviews, I learned that the user sentiment matched my secondary research findings regarding discretion and inclusivity. I heard expressions such as...
- “I hope more period apps in 2020 will be more gender neutral,”
- “The app is very feminine... feels archaic in 2020”
- Her current period tracking app is “obvious and not discreet”
- “Very girly and obvious”
... which led me to be mindful about the simplicity of the features and the feelings of inclusivity with the UI.
Another discovery was that users wanted more of a simplistic experience….
- “I will never need so many features … The app is not as simple as I’d like it to be”
… which ties into the common narrative revolving around the need for only a few features
- “I just want to know when I started and ended my period,”
- “I want to know I saved my data so I don’t lose tracking”
- “I want to have a heads up of my next period prediction, and a reminder to log my start and end dates”
- “I want to see a calendar and my past cycles” “a reminder for my pill would be nice”
I then noted to include: a calendar, history, feature to save/sync, and notifications for reminders about birth control, logging in the period start and end dates, and the prediction of the next cycle.
AFFINITY MAP
After interviewing these womxn, I started to synthesize my findings through affinity mapping. This method helped me organize all the information I collected from the interviewees, and visually see how popular some thoughts and opinions are.
I collected the main pain points, thoughts, and quotes of my interviewees and wrote each of them down onto a post-it. At the top of each group, I summarized and captioned each grouping in black writing.
- On the group to the very left, it describes how users enjoy their tracking app to automatically count days of their cycle and sense their trends based off of the days they input.
- Next group is about how users appreciate informative facts about feminine health, and motivational pushes
- Third row describes how users enjoy their transportability and convenience of apps as their tool
- Fourth discusses users’ pain points of forgetting to log in dates and not wanting to pay or register to store and save their data
- Next, in this big group, users discuss what are the most important features in their tracking tools. The most common features they discussed include predicting and notifying the user of their next start date, the ability to track/log dates and view their history, and knowing the predicted starting date of their next cycle.
- These smaller groups describe how users want simplicity, discretion, pain tracking and tracking any changes, how they feel the interface is too feminine and girly. They also expressed how they’d like an app to not require wifi, to sync with their computer, store data, and remind them to take their birth control.
EMPATHY MAP
Once I organized the user's thoughts and pain points, I created an empathy map, where I articulated what I know about the users. This pushes me to really get into the user’s head.
USER PERSONA
By reframing my research insights, I built the persona around the attributes and common characteristics amongst my interviewees. This helps me have a representation of specific users in mind.
USER RESEARCH TAKEAWAYS
The top 3 insights I gathered from my user research is that they want…
- Simplicity: Users are busy with their lives already. They shouldn’t have to learn a complicated tracking tool on top of their responsibilities.
- Discretion and inclusion: Tracking their personal health does not need to be pink and flowery, like the current interfaces.
- Notifications and reminders: To help users feel organized and tended
HMW
The user interview insights uncovered how the secondary research did in fact align with the sentiment of the users, which led to the question of…
How might we create a simple, inclusive, and discreet menstrual tracking tool for womxn on-the-go?
USER STORIES
Below are post-its of user interview data I have compiled into a more organized fashion.
Topics are written in pink at the top: saving data, notifying the user, taking control by tracking their period, calendar/history feature, and reminders. Since knowledge & motivation was not a commonly discussed topic compared to the others, I’ve decided that the MVP (or the minimum viable product) should be the aforementioned topics, excluding the knowledge & motivation.
SKETCHING
I roughly sketched the red routes I decided to focus on, based on the common user stories discussed prior.
New users want to sync/store inputted data
User wants to turn on notifications
User wants to add their period start date
I utilized these sketches for the following guerilla usability testing. The biggest finding I discovered was that the menu (hamburger) icon located at the top left corner of the Calendar/home screen was not very clear.
WIREFRAMES
Because of the difficulty, or rather clarity of the menu/hamburger icon in the Calendar/home screen, I added a tab bar at the bottom of the Calendar/home screen, and all other screens, to clearly direct users of the pages available for them. The icons included in the tab bar also include a text under the icon to clearly state what the pages are for (Calendar, History, and Settings).
With some mentor advice, I also changed the save/sync feature to be automatic. I was advised that users are used to auto-save, with popular softwares like Google Docs -- auto-save is very common. We would want our users to not worry about manually saving.
Example wireframes from red routes
MOODBOARD
I continued onto the visual design process by collecting inspiration photos that resonated with my brand attributes and personality onto a moodboard. Since I was aiming for a discreet interface, I chose a general color scheme that was more muted.
STYLE GUIDE
By reexamining the moodboard, I created a style guide -- the building blocks of the Cheers app -- which includes:
- Brand Mission, Personality, and Attributes
- Logo creation and sizing for the web and mobile UI
- Color Palette, which has evolved from the moodboard -- the various colors of the rainbow represents inclusion (similarly to the LGBTQ flag). They aren’t neon however, as I want it to feel calming and welcoming, but also discreet as well, since the user interviews proved that they want their period tracking app to feel discreet
- Font family with size & weight
- Grid usage for mobile and desktop
- Icon style and color
- UI elements
- Imagery, or UI styles
HIGH FIDELITY MOCKUPS
Employing the elements of the style guide and the wireframe iterations, I built the hi-fi mockups. With a couple rounds of iterations from mentor advice -- the mockups have evolved into mindful iterations of using color to represent visual hierarchy, consistent padding and card usage, and keeping the UI elements/buttons within the content screen.
Examples of Cheers hi-fi mockups
ITERATIONS (used for prototyping of the 1st round of usability testing)
USABILITY TESTINGS
The big takeaway from this first usability testing was the confusion in inputting the birth control notifications. Users expected to add the birth control reminder in the plus button in the Calendar/home screen, or by tapping on the specific date, instead of the intended route of going to the settings screen where the notifications were.
I followed-up with this issue by including an option for users to “Add a Birth Control Reminder” among the other options when tapping on the plus button in the Calendar/home screen. This would take the user to the Notifications screen where they can proceed to schedule birth control alarms.
Another concern was the uncertainty regarding the meaning of the data visualization under Trends in the History screen. Users struggled to figure out what the data visualization meant under Trends in the History screen. I then redesigned the data visualization itself, by adding multiple circles to demonstrate the past trends, and have one bigger circle to demonstrate the average.
With the implemented iterations from the first round, I used Figma for my second round, as my prototyping-software-of-choice (since I was already using Figma to create my mockups -- I used InVision Studio earlier to test out, as it was my first time) and added some animations between screens.
As I mentioned previously, I inputted the plus button as one of the actions the user can click on, however this prompts the screen to say “Pick a Date” at the top, which didn’t catch many of the users’ eyes. Many mentioned that they expected something to pop up. I learned that the response to this add button needs to be more clear and perhaps in the user’s face.
Data visualizations under Trends were still confusing to ⅖ users, while the other ⅗ users understood. There is still room for improvement on constructing a more comprehensible data visualization -- back to scouring for inspiration!
I iterated a check-animation to indicate that the birth control reminder is saved, however a user has expressed that since that check mark is just next to the label, that it only seems to be saving the label inputted, and not necessarily the whole alarm. A save button below the input labels may be a clearer option, instead of a check next to the label.
CONCLUSION
Now, let’s go back to my HMW question: How might we create a simple, inclusive, and discreet menstrual tracking tool for womxn on-the-go?
Pulling some quotes from the users from the 2nd round of my usability testings that I’ve just discussed:
- “It’s very straightforward and simple”
- “Wouldn’t try to hide this”
- “It’s like a calculator -- it doesn’t assume the audience, a middle school student or a university student -- it does its job regardless and for everyone”
Although there was still some confusion with some features in the 2nd round of the usability testings, the focus of simplicity, inclusivity, and discretion was conveyed.
Continuous rounds of usability testing will be implemented to unfold more user thoughts and improvement points.
The prioritized usability issues include creating a CTA in the content area of the screen to direct the user on what they are adding, when the user taps on the add button in the Calendar/home screen, continue clarifying the data visualization under Trends, and incorporating a save button for the birth control notifications.
